import QtQuick
import QtQuick.Window
import QtQuick.Layouts
import QtQuick.Controls

Window {
    id: mainWindow
    minimumWidth: 640
    minimumHeight: 480
    visible: true
    title: "循环闹钟"


    property int totalTime: 3600
    property int remainTime: 0
    property int stageNum: 1
    property double progress: 0


    function refreshProgress(){
        progressCanvas.requestPaint();
        var h = Math.floor(remainTime / 3600);
        var m = Math.floor(Math.floor(remainTime % 3600) / 60);
        var s = Math.floor(remainTime % 60);
        var p = remainTime/totalTime * 100;
        remainPercentText.text = p.toFixed(2).toString() + "%";
//        console.log(stageNum);
        if(stageNum == 1){
            stageText.text = "第一阶段";
        }else if(stageNum == 2){
            stageText.text = "第二阶段";
        }else{
            stageText.text = "第一阶段";
        }

        remainTimeText.text = h.toString() + ":" +
                m.toString() + ":" +
                s.toString();
        //        console.log(remainTime)
    }

    Timer{
        id: mainTimer
        interval: 1000
        repeat: true
        triggeredOnStart: true
        onTriggered: {
            remainTime -= 1;
            if(remainTime < 1){
                remainTime = 0;
                if(stageNum == 1){
                    stageNum = 2;
                    stage2Input.onEditingFinished();
                }else if(stageNum == 2){
                    stageNum = 1;
                    stage1Input.onEditingFinished();
                }
                else{
                    stageNum = 1;
                    stage1Input.onEditingFinished();
                }
                mainWindow.visibility = "Maximized";
                mainWindow.requestActivate();
            }
            mainWindow.refreshProgress();

        }
    }

    Rectangle{
        id: mainBg
        anchors.fill: parent
        //        color: "green"

        Rectangle{
            width: stage1Label.width + stage1Input.width + 20 +
                   stage2Label.width + stage2Input.width + 20
            //                   35 + setParmsButton.width
            height: setParmsButton.height
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 0.05*parent.height
            color: "transparent"
            //            radius: 10

            Label{
                id: stage1Label
                text: "第一阶段秒数:"
                anchors.verticalCenter: parent.verticalCenter
                //                anchors.left: parent.left
                //                anchors.leftMargin: 10
            }

            TextInput{
                id: stage1Input
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: stage1Label.right
                anchors.leftMargin: 10
                color: "black"
                text: "3600"
                //                horizontalAlignment: TextInput.AlignRight
                maximumLength: 9
                width: 100
                onEditingFinished: {
                    //                    console.log("finished");
                    var temp = Number(text);
                    if(temp != temp  || temp < 1){
                        text = "3600";
                        temp = 3600;
                    }
                    if(stageNum == 1){
                        totalTime = temp;
                        remainTime = totalTime;
                    }
                }

                Rectangle{
                    width: parent.width + 10
                    height: parent.height * 1.3
                    anchors.centerIn: parent
                    color: "transparent"
                    radius: 5
                    border.color: "grey"
                    border.width: 1
                }

            }

            Label{
                id: stage2Label
                text: "第二阶段秒数:"
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: stage1Input.right
                anchors.leftMargin: 25
            }



            TextInput{
                id: stage2Input
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: stage2Label.right
                anchors.leftMargin: 10
                text: "300"
                color: "black"
                //                horizontalAlignment: TextInput.AlignRight
                maximumLength: 9
                width: 100
                onEditingFinished: {
                    var temp = Number(text);
                    if(temp != temp  || temp < 1){
                        text = "300";
                        temp = 300;
                    }
                    if(stageNum == 2){
                        totalTime = temp;
                        remainTime = totalTime;
                    }
                }


                Rectangle{
                    width: parent.width + 10
                    height: parent.height * 1.3
                    anchors.centerIn: parent
                    color: "transparent"
                    radius: 5
                    border.color: "grey"
                    border.width: 1
                }

            }

            ItemDelegate{
                id: setParmsButton
                text: "设置参数"
                visible: false
                anchors.left: stage2Input.right
                anchors.leftMargin: 35
                onClicked: {
                    var temp;
                    var temp1 = Number(stage1Input.text);
                    var temp2 = Number(stage2Input.text);
                    if(temp1 != temp1  || temp1 < 1){
                        stage1Input.text = 3600
                        return;
                    }
                    if(temp2 != temp2  || temp2 < 1){
                        stage2Input.text = 300
                        return;
                    }

                    if(stageNum == 1){
                        temp = temp1;
                    }else if(stageNum == 2){
                        temp = temp2;
                    }

                    totalTime = temp;
                    remainTime = totalTime;
                    //                        enabled = false;
                    startButton.enabled = true;
                }

                contentItem: Text {
                    rightPadding: parent.spacing
                    text: parent.text
                    font: parent.font
                    color: parent.enabled ? (parent.down ? "white" : "black") : "#bdbebf"
                    elide: Text.ElideRight
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }

                background: Rectangle {
                    implicitWidth: 100
                    implicitHeight: stage1Input.height
                    radius: 10
                    opacity: enabled ? 1 : 0.3
                    color: parent.down ? "lightgreen" : "lawngreen"
                }
            }

        }

        Canvas{
            id: progressCanvas
            width: 0.5*Math.min(mainWindow.height, mainWindow.width)
            height: width
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 0.2*parent.height
            onPaint: {
                var ctx = getContext("2d")
                ctx.clearRect(0,0,width,height)
                ctx.beginPath()
                ctx.strokeStyle = 'grey'
                ctx.lineWidth = 5
                var radius = width/2 - 5
                ctx.arc(width/2,height/2,radius,0,Math.PI*2)
                ctx.stroke()

                var r = (remainTime/totalTime)*2*Math.PI
                ctx.beginPath()
                ctx.strokeStyle = 'lightgreen'
                ctx.lineWidth = 5

                ctx.arc(width/2,height/2,radius,0-90*Math.PI/180,r-90*Math.PI/180, false)
                ctx.stroke()
            }

            Text{
                id: remainPercentText
                text: "0.00%"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: remainTimeText.top
                anchors.bottomMargin: 5
                font.pixelSize: 22
            }

            Text{
                id: remainTimeText
                text: "--:--:--"
                anchors.centerIn: parent
                font.pixelSize: 22
            }

            Text{
                id: stageText
                text: "第一阶段"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: remainTimeText.bottom
                anchors.topMargin: 5
                font.pixelSize: 22
            }
        }

        Rectangle{
            width: 2*startButton.width + (startButton.width/2)
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 0.8*parent.height

            ItemDelegate{
                id: startButton
                text: "开始"
                //                enabled: false
                anchors.left: parent.left
                onClicked: {
                    //                    console.log(this.text);
                    if(this.text.localeCompare("开始") === 0){
                        setParmsButton.onClicked();
                        mainTimer.start();
                        this.text = "暂停";
                    }else if(this.text.localeCompare("暂停") === 0){
                        mainTimer.stop();
                        this.text = "继续";
                    }else if(this.text.localeCompare("继续") === 0){
                        mainTimer.start();
                        this.text = "暂停";
                    }
                    //                    setParmsButton.enabled = false;
                    stage1Input.enabled = false;
                    stage2Input.enabled = false;
                    stopButton.enabled = true;


                }

                contentItem: Text {
                    rightPadding: parent.spacing
                    text: parent.text
                    font: parent.font
                    color: parent.enabled ? (parent.down ? "white" : "black") : "#bdbebf"
                    elide: Text.ElideRight
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }

                background: Rectangle {
                    implicitWidth: 100
                    implicitHeight: 40
                    radius: 10
                    opacity: enabled ? 1 : 0.3
                    color: parent.down ? "lightgreen" : "lawngreen"
                }
            }
            ItemDelegate{
                id: stopButton
                text: "停止"
                anchors.right: parent.right
                enabled: false
                onClicked: {
                    mainTimer.stop();
                    startButton.text = "开始";
                    enabled = false;
                    setParmsButton.enabled = true;
                    stageNum = 1;
                    stage1Input.onEditingFinished();
                    remainTime = 0;
                    mainWindow.refreshProgress();

                    stage1Input.enabled = true;
                    stage2Input.enabled = true;
                }

                contentItem: Text {
                    rightPadding: parent.spacing
                    text: parent.text
                    font: parent.font
                    color: parent.enabled ? (parent.down ? "white" : "black") : "#bdbebf"
                    elide: Text.ElideRight
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }

                background: Rectangle {
                    implicitWidth: 100
                    implicitHeight: 40
                    radius: 10
                    opacity: enabled ? 1 : 0.3
                    color: parent.down ? "lightcoral" : "orangered"
                }
            }
        }




    }

    Rectangle{
        id: exitRect
        width: parent.width * 0.5
        height: parent.height * 0.5
        anchors.centerIn: parent
        visible: false
        radius: 25
        border.width: 1
        border.color: "grey"

        Text {
            text: qsTr("退出?")
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 20
        }

        ItemDelegate{
            id: exitYesButton
            text: "是"
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: parent.width * 0.1
            onClicked: {
                Qt.exit(0);
            }

            contentItem: Text {
                rightPadding: parent.spacing
                text: parent.text
                font: parent.font
                color: parent.enabled ? (parent.down ? "white" : "black") : "#bdbebf"
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }

            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                radius: 10
                opacity: enabled ? 1 : 0.3
                color: parent.down ? "lightcoral" : "orangered"
            }
        }

        ItemDelegate{
            id: exitNoButton
            text: "否"
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: parent.width * 0.1
            onClicked: {
                exitRect.visible = false;
            }

            contentItem: Text {
                rightPadding: parent.spacing
                text: parent.text
                font: parent.font
                color: parent.enabled ? (parent.down ? "white" : "black") : "#bdbebf"
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }

            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                radius: 10
                opacity: enabled ? 1 : 0.3
                color: parent.down ? "lightgreen" : "lawngreen"
            }
        }
    }

    onClosing: function(closeEvent){
        closeEvent.accepted = false;
        exitRect.visible = true;
    }

}
